<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style-type: none;
        }
        .box{
            width: 80%;
            border: 1px solid red;
            margin: 0 auto;
        }
        .box li{
            float: left;
            width: 25%;
        }
        .box div{
            width: 100%;
            background: orange;
            font-size: 60px;
            text-align: center;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        //瀑布流--》在最短的li下面添加div
        var box = $('.box');
        var li = $(".box li");//这个只是元素的集合是一个类数组，是不能够进行排序的
        var aLi = [];//用于存放页面的li
        li.each(function (i,v) {
            aLi.push(v);//将每一个li存放在数组当中，用于后面排序
        });
        createDiv();
        $(window).scroll(function () {
            var scrollTop = $(document).scrollTop();//获取屏幕滚动的高度
            var screenHeight = $(window).height();//获取屏幕的高度
            var contentHeight = $(document).height();//获取内容的高度（屏幕的总高度）
           if(scrollTop + screenHeight > contentHeight - 100){
               //说明滚动条快到底部了，这时候就要创建新的div
               createDiv();
           }
        })

        /**
         * 创建div的函数
         */
        function createDiv(){
            for(var i = 0; i < 20; i++){
                var div = $("<div></div>");
                var height = parseInt(Math.random() * 200) + 100 + 'px';
                div.css({
                    'height' : height,
                    'lineHeight' : height
                });
                div.html(i + 1);
                var newArr = aLi.sort(function (a, b){
                    return a.offsetHeight - b.offsetHeight;
                });
                //将新创建的div放在高度最小的li下面
                div.appendTo(newArr[0]);

            }
        }
    </script>
</body>
</html>